<template>
  <div class="datav_map">
    <div class="datav_map_img">
      <img src="./../../assets/img/index/datav_map_bj.png" alt />
    </div>
    <div class="datav_map_content">
      <div class="datav_part_title">
        <span>用户分布图</span>
        <p>
          <span>
            会员：
            <b style="color:#4affff;">239587</b>
          </span>
          <span>
            VIP：
            <b style="color:#25a6f4;">3276</b>
          </span>
          <span>
            代理：
            <b style="color:#28b1ff;">67%</b>
          </span>
        </p>
      </div>
      <div id="chart_map" style="width:100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
require("./../../assets/js/china");
export default {
  name: "datav_map",
  data() {
    return {};
  },
  components: {},
  mounted() {
    var that = this;
    this.$nextTick(() => {
      that.echart_map();
    });
  },
  methods: {
    echart_map() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("chart_map"));
      /*获取地图数据*/
      myChart.showLoading();
      myChart.hideLoading();
      var geoCoordMap = {
        福州: [119.4543, 25.9222],
        长春: [125.8154, 44.2584],
        重庆: [107.7539, 30.1904],
        西安: [109.1162, 34.2004],
        成都: [103.9526, 30.7617],
        常州: [119.4543, 31.5582],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        海口: [110.3893, 19.8516],
        长沙: [113.019455, 28.200103],
        上海: [121.4, 31.73],
        内蒙古: [106.82, 39.67]
      };

      var GZData = [
        [
          {
            name: "长沙"
          },
          {
            name: "福州",
            value: 95
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "长春",
            value: 80
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "重庆",
            value: 70
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "西安",
            value: 60
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "成都",
            value: 50
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "常州",
            value: 40
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "北京",
            value: 30
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "北海",
            value: 20
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "海口",
            value: 10
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "上海",
            value: 80
          }
        ],
        [
          {
            name: "长沙"
          },
          {
            name: "内蒙古",
            value: 80
          }
        ]
      ];

      var color = ["#33bae4"];
      var series = [];
      [["福州", GZData]].forEach(function(item, i) {
        series.push({
          name: item[0],
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,

          rippleEffect: {
            period: 5,
            scale: 6,
            brushType: "stroke"
          },
          label: {
            normal: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          },
          symbolSize: function(val) {
            return val[2] / 8;
          },
          itemStyle: {
            normal: {
              color: color[i]
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          })
        });
      });

      series.push({
        id: "bar",
        zlevel: 2,
        type: "bar",
        symbol: "none",
        itemStyle: {
          normal: {
            color: "#ddb926"
          }
        },
        label: {
          show: true,
          position: "right"
        },
        data: GZData
      });
      var option = {
        title: [
          {
            id: "statistic",
            text: "数据排行",
            right: 160,
            top: 60,
            width: 100,
            textStyle: {
              color: "#fff",
              fontSize: 16
            }
          }
        ],

        grid: {
          right: 50,
          top: 100,
          bottom: 40,
          width: "20%"
        },
        xAxis: {
          type: "value",
          scale: true,
          position: "top",
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            margin: 2,
            textStyle: {
              color: "#aaa"
            }
          }
        },
        yAxis: {
          type: "category",
          nameGap: 16,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#ddd"
            }
          },
          data: GZData
        },

        tooltip: {
          trigger: "item"
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false
            }
          },
          zoom: 1.2,
          roam: true,
          itemStyle: {
            normal: {
              //          	color: '#ddd',
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(175,238,238, 0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(	47,79,79, .1)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0
            }
          },
          data: [
            {
              name: "南海诸岛", //隐藏海南岛
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: { show: false },
                  borderWidth: "0",
                  borderColor: "#10242b",
                  areaStyle: { color: "#10242b" }
                },
                emphasis: { opacity: 0, label: { show: false } }
              }
            }
          ]
        },
        series: series
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.datav_map {
  width: 100%;
  position: relative;
  .datav_map_img {
    width: 100%;
    img {
      // width: 100%;
      height: 100%;
    }
  }
  .datav_map_content {
    width: 100%;
    padding: 10px 20px 20px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: column;

    .datav_part_title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > p {
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media only screen and (min-width: 1680px) and (max-width: 1920px) {
          span {
            font-size: 16px;
          }
        }
        @media only screen and (min-width: 1440px) and (max-width: 1680px) {
          span {
            font-size: 16px;
          }
        }
        @media only screen and (min-width: 1024px) and (max-width: 1440px) {
          width: 70%;
          span {
            font-size: 12px;
          }
        }
        @media only screen and (max-width: 1024px) {
          span {
            font-size: 10px;
          }
        }
      }
    }
    .datav_map_body {
      width: 100%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      padding-top: 20px;
    }
  }
}
</style>
